<template>
    <div class="chartshow chartshowBottom">
        <!-- 左边 -->
        <div class="title">
            <p>缺陷统计</p>
            <div class="rate">
                <p>坏品占比</p>
                <p class="total">总数占比</p>
            </div>
        </div>
        <!-- 柱状图-->
        <div class="NameList chart-size">
            <p class="none" v-if="!statisticDataSourceinfo?.CheckNameList?.length">暂无数据</p>
            <div v-else class="progressStyle" v-for="(DataSource, index) in dataSorce" :key="index">
                <div class="left">
                    <p class="textStyle">{{ DataSource?.CheckNameList }}：{{ statisticDataSourceinfo.CheckValueList.length ? DataSource?.CheckValueList : 0 }}</p>
                    <progress max="100" :value="statisticDataSourceinfo.CheckValueList.length ? (DataSource?.CheckValueList) : 0" class="progresschart"></progress>
                </div>
                <div class="rate">
                    <div>{{ DefectiveCount ? (((DataSource?.CheckValueList) / DefectiveCount).toFixed(2)) : 0 }}%</div>
                    <div>{{ DefectiveCount ? (((DataSource?.CheckValueList) / TotalCount).toFixed(2)) : 0 }}%</div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
const props = defineProps(['statisticDataSourceinfo', 'DefectiveCount', 'TotalCount'])
const prop = ref(props)
const dataSorce = ref([])
const mergedArray = () => {
    const result = prop.value.statisticDataSourceinfo?.CheckNameList?.map((value: any, index: any) => {
        return { CheckNameList: value, CheckValueList: prop.value.statisticDataSourceinfo.CheckValueList[index] };
    })
    result?.sort((a: any, b: any) => b.CheckValueList - a.CheckValueList);
    dataSorce.value = result



}
onMounted(() => {
    setTimeout(() => {
        mergedArray()
    }, 500)

});
watch(prop.value, (value: any) => {
    mergedArray()

})
</script>
  
<style scoped lang="less">
/*@media screen and (max-height: 1440px) {
    .chartshowBottom {
        height: 840px;
    }

    .chart-size {
        width: 100%;
        height: 90%;
    }
}*/

/*@media screen and (max-height: 1080px) {
    .chartshowBottom {
        height: 480px;
    }

    .chart-size {
        width: 100%;
        height: 90%;
    }
}*/

progress {
    height: 14px;
    border-radius: 2px;
}

/* 表示总长度背景色 */
progress::-webkit-progress-bar {
    background-color: #ffffff;
    border-radius: 2px;
}

/* 表示已完成进度背景色 */
progress::-webkit-progress-value {
    background-color: #FF636B;
    border-radius: 2px;
}

/* 设置滚动条的样式 */
.NameList::-webkit-scrollbar {
    width: 4px;
    border-radius: 13px;
}

/* 滚动槽 */
.NameList::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5); */
    background-color: #E6E6E6;
}

/* 滚动条滑块 */
.NameList::-webkit-scrollbar-thumb {
    border-radius: 13px;
    background: #BFBFBF;
    /* -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5); */
}


.chartshow {
    height: 100%;
    /*高固定*/
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    /*padding: 20px 40px 20px 20px;*/
    color: #595959;
    padding-bottom: 32px;

    .title {
        padding: 20px 40px 0px 20px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        margin-bottom: 3px;

      

        .rate {
            display: flex;
            width: 155px;
            justify-content: space-between;
            align-items: center;
        }
    }

    .NameList {
        overflow: overlay;
        padding-left: 20px;
        color: #595959;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        padding-right: 10px;
        padding-left: 20px;
        height: 90%;
        /*高固定*/

        .progressStyle {
            height: 36px;
            display: flex;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 20px;

            .left {

                .textStyle {
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 22px;
                    margin-bottom: 4px;
                }

                .progresschart {
                    display: block;
                }
            }

            .rate {
                display: flex;
                width: 170px;
                justify-content: space-between;
                align-items: center;
                padding-right: 30px;
            }
        }

        .none {
            font-size: 16px;
            font-weight: 900;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
        }

    }


}</style>